<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3>批量录入试题</h3>
        <el-card class="qn-card">
          <div class="qn-content">
            <div style="flex-grow: 1">
              <el-input :rows="30" v-model="quText" type="textarea" placeholder="请参考右侧样本，在此处批量录入试题！" />
            </div>
            <div class="bt-btn">
              <div>
                <el-button :disabled="!quText" :loading="dialogVisible" type="primary" icon="el-icon-upload2" @click="showPreview">
                  预览&入库
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <h3>试题样本</h3>
        <el-card class="qn-card">
          <div class="qn-content">
            <div style="flex-grow: 1" class="qn-sample">
              <el-input :rows="30" v-model="sampleData" type="textarea" placeholder="试题内容预览处，请先生成试题！" readonly />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row> <ai-preview-dialog :visible.sync="dialogVisible" :qu-str="quStr" :repo-id="repoId" />
  </div>
</template>
<script>
import AiPreviewDialog from '@/views/admin/repo/qu/components/AiPreviewDialog.vue'
import permission from '@/directive/permission'
import { mapGetters } from 'vuex'

export default {
  directives: { permission },
  components: { AiPreviewDialog },
  data() {
    return {
      repoId: '',
      rules: {
        desc: [
          { required: true, message: '请描述您要生成的题目类型！', trigger: 'blur' }
        ],
        total: [
          { required: true, message: '题目数量不能为空！', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value === 0) {
              callback(new Error('至少要生成一道题！'))
            } else {
              callback()
            }
          }
          }
        ]
      },
      loading: false,
      dialogVisible: false,
      sampleData: '',
      quText: '',
      quStr: ''
    }
  },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },

  created() {
    // 带入题库ID
    if (this.$route.query.repoId) {
      this.repoId = this.$route.query.repoId
    }

    this.sampleData = '[单选题]1.中国最长的河流是？\n' +
      'A、黄河\n' +
      'B、长江\n' +
      'C、珠江\n' +
      'D、黑龙江\n' +
      '答案:B\n' +
      '解析:长江是中国最长的河流，全长约6397公里。\n' +
      '难度:简单\n' +
      '\n' +
      '[多选题]2.以下哪些城市是中国的直辖市？\n' +
      'A、北京\n' +
      'B、上海\n' +
      'C、广州\n' +
      'D、重庆\n' +
      'E、天津\n' +
      '答案:A,B,D,E\n' +
      '解析:中国的直辖市有北京、上海、天津和重庆。\n' +
      '难度:一般\n' +
      '\n' +
      '[不定项选择题]以下哪些作品是李清照创作的？\n' +
      'A、《醉花阴》\n' +
      'B、《江城子》\n' +
      'C、《一剪梅》\n' +
      'D、《念奴娇》\n' +
      '答案:A,C\n' +
      '解析:《醉花阴》和《一剪梅》是李清照的代表作，而《江城子》和《念奴娇》并非其作品。\n' +
      '难度:简单\n' +
      '\n' +
      '[判断题]3.中国的最高峰是珠穆朗玛峰。\n' +
      '答案:正确\n' +
      '解析:珠穆朗玛峰位于中国与尼泊尔边界，是地球上的最高峰，海拔8848.86米。\n' +
      '难度:简单\n' +
      '\n' +
      '[填空题]4.中国最大的淡水湖是________。\n' +
      '答案:鄱阳湖\n' +
      '解析:鄱阳湖位于江西省，是中国最大的淡水湖，面积约为3585平方公里。\n' +
      '难度:一般\n' +
      '\n' +
      '[填空题]李白，字__________，号__________，唐代著名__________诗人，被后人誉为“__________”。\n' +
      '答案:太白##青莲居士##浪漫主义##诗仙\n' +
      '解析:李白，字太白，号青莲居士，是唐代著名的浪漫主义诗人，被后人誉为“诗仙”。\n' +
      '难度:一般\n' +
      '\n' +
      '[填空题]列出四大名著。\n' +
      '答案:三国演义||《三国演义》##水浒传||《水浒传》##红楼梦||《红楼梦》##西游记||《西游记》\n' +
      '解析:列出四大名著有三国演义、水浒传、红楼梦、西游记。##分隔多个选项，||给同一选项增加近似选项。\n' +
      '难度:一般\n' +
      '\n' +
      '[简答题]5.简述中国的地理位置及其对气候的影响。\n' +
      '解析:中国位于亚洲东部，东临太平洋，西至帕米尔高原，北起黑龙江，南至南海。这种地理位置使得中国具有多样的气候类型，从北到南依次为寒温带、温带、亚热带和热带。东部沿海地区受海洋影响较大，气候湿润；西部内陆地区则多为干旱或半干旱气候。此外，中国的地形复杂，高原、山地、盆地和平原交错分布，也极大地影响了各地的气候特征。\n' +
      '难度:较难'
  },
  methods: {

    showPreview() {
      this.quStr = this.quText
      this.dialogVisible = true
    },
    toAiGen() {
      this.$router.push({ name: 'QuAiGen', query: { repoId: this.repoId }})
    }
  }
}
</script>
<style scoped>

.qn-card{
  height: 80vh;
  overflow: auto;
  line-height: 32px;
}

.qn-content{
  display: flex;
  flex-direction: column;
  height: calc(80vh - 42px);
}


.qn-box{
  display: flex;
}

::v-deep .qn-box .el-input-number{
  width: 90px;
  margin: 0 10px;
}


.bt-btn{
  border-top: #ccc 1px solid;
  padding: 10px 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: -20px;
}

::v-deep .qn-content .el-textarea__inner{
  color: #1a1a1a;
}

::v-deep .qn-sample .el-textarea__inner{
  color: #888;
}

</style>
